[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { Suspense } from "react" import Hero from "./components/Hero" import Features from "./components/Features" import AISection from "./components/AISection" import VercelSection from "./components/VercelSection" import Footer from "./components/Footer" import Navigation from "./components/Navigation" import LoadingSpinner from "./components/LoadingSpinner" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/Navigation.tsx" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Menu, X, ChevronLeft, ChevronRight } from "lucide-react" export default function Navigation() { const [scrolled, setScrolled] = useState(false) const [activeSection, setActiveSection] = useState("hero") const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [showLeftScroll, setShowLeftScroll] = useState(false) const [showRightScroll, setShowRightScroll] = useState(false) const navScrollRef = useRef(null) const navItems = [ { id: "hero", label: "HOME" }, { id: "features", label: "FEATURES" }, { id: "ai", label: "AI ENGINE" }, { id: "vercel", label: "INFRASTRUCTURE" }, { id: "contact", label: "CONTACT" }, { id: "docs", label: "DOCUMENTATION" }, { id: "api", label: "API" }, { id: "support", label: "SUPPORT" }, ] useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50) const sections = navItems.map((item) => item.id) for (const section of sections.reverse()) { const element = document.getElementById(section) if (element) { const rect = element.getBoundingClientRect() if (rect.top <= 100) { setActiveSection(section) break } } } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) useEffect(() => { const checkScroll = () => { if (navScrollRef.current) { const { scrollLeft, scrollWidth, clientWidth } = navScrollRef.current setShowLeftScroll(scrollLeft > 0) setShowRightScroll(scrollLeft < scrollWidth - clientWidth - 5) } } checkScroll() window.addEventListener("resize", checkScroll) const observer = new MutationObserver(checkScroll) if (navScrollRef.current) { observer.observe(navScrollRef.current, { childList: true, subtree: true }) } return () => { window.removeEventListener("resize", checkScroll) observer.disconnect() } }, []) const scrollNav = (direction: "left" | "right") => { if (navScrollRef.current) { const scrollAmount = 200 const newScrollLeft = direction === "left" ? navScrollRef.current.scrollLeft - scrollAmount : navScrollRef.current.scrollLeft + scrollAmount navScrollRef.current.scrollTo({ left: newScrollLeft, behavior: "smooth", }) } } return (

NEXORASIM ^™

{showLeftScroll && ( )}

{navItems.map((item) => ( {item.label} {activeSection === item.id &&

} ))}

{showRightScroll && ( )}

LIVE

{mobileMenuOpen && (

{navItems.map((item) => ( setMobileMenuOpen(false)} > {item.label} ))}

)}

) } [V0_FILE]typescriptreact:file="app/components/Hero.tsx" isEdit="true" "use client" import { useEffect, useState, useRef } from "react" export default function Hero() { const [rotation, setRotation] = useState(0) const [pulseScale, setPulseScale] = useState(1) const [connectionNodes, setConnectionNodes] = useState>([]) const canvasRef = useRef(null) useEffect(() => { const nodes = [ { x: 80, y: 100, active: false }, { x: 240, y: 120, active: false }, { x: 120, y: 220, active: false }, { x: 200, y: 200, active: false }, { x: 160, y: 80, active: false }, { x: 280, y: 180, active: false }, ] setConnectionNodes(nodes) const rotationInterval = setInterval(() => { setRotation((prev) => prev + 0.2) }, 50) const pulseInterval = setInterval(() => { setPulseScale((prev) => (prev === 1 ? 1.03 : 1)) }, 3000) const nodeInterval = setInterval(() => { setConnectionNodes((prev) => prev.map((node) => ({ ...node, active: Math.random() > 0.8, })), ) }, 2000) return () => { clearInterval(rotationInterval) clearInterval(pulseInterval) clearInterval(nodeInterval) } }, []) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() const particles: Array<{ x: number; y: number; vx: number; vy: number; opacity: number }> = [] for (let i = 0; i < 30; i++) { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 0.3, vy: (Math.random() - 0.5) * 0.3, opacity: Math.random() * 0.2, }) } const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) particles.forEach((particle) => { particle.x += particle.vx particle.y += particle.vy if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1 if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1 ctx.fillStyle = `rgba(0, 0, 0, ${particle.opacity})` ctx.fillRect(particle.x, particle.y, 1, 1) }) requestAnimationFrame(animate) } animate() window.addEventListener("resize", resizeCanvas) return () => window.removeEventListener("resize", resizeCanvas) }, []) return (

) } [V0_FILE]typescriptreact:file="app/components/Features.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Search, Cpu, QrCode } from "lucide-react" export default function Features() { const [activeFeature, setActiveFeature] = useState(0) const [connectionLines, setConnectionLines] = useState>([]) const features = [ { title: "ICCID SEARCH", description: "Real-time ICCID validation and lookup system with global database integration and instant verification protocols", code: "SEARCH_001", metrics: { accuracy: "99.9%", speed: "<100ms", coverage: "Global", database: "Real-time" }, status: "ACTIVE", icon: Search, schematic: ( ), }, { title: "SM-DP+ INTEGRATION", description: "Seamless subscription manager integration for profile management with GSMA-compliant protocols and security", code: "SMDP_002", metrics: { compliance: "SGP.22", security: "TLS 1.3", availability: "24/7", profiles: "Unlimited" }, status: "OPERATIONAL", icon: Cpu, schematic: ( ), }, { title: "QR CODE ACTIVATION", description: "Instant eSIM activation through secure QR code generation with encrypted profile delivery and validation", code: "QR_003", metrics: { generation: "Instant", encryption: "AES-256", success: "99.8%", delivery: "Secure" }, status: "READY", icon: QrCode, schematic: ( ), }, ] useEffect(() => { const lines = [ { from: 0, to: 1, active: false }, { from: 1, to: 2, active: false }, { from: 0, to: 2, active: false }, ] setConnectionLines(lines) const interval = setInterval(() => { setConnectionLines((prev) => prev.map((line) => ({ ...line, active: Math.random() > 0.7, })), ) }, 2000) const featureInterval = setInterval(() => { setActiveFeature((prev) => (prev + 1) % features.length) }, 5000) return () => { clearInterval(interval) clearInterval(featureInterval) } }, []) return (

CORE FEATURES

Advanced eSIM management capabilities powered by AI and GSMA compliance standards

{features.map((feature, index) => { const IconComponent = feature.icon return (

setActiveFeature(index)} >

{feature.code}

{feature.title}

{feature.schematic}

{feature.description}

{activeFeature === index && (

{Object.entries(feature.metrics).map(([key, value]) => (

{key}: {value}

))}

)}

{activeFeature === index && (

)}

{feature.status}

) })}

REAL-TIME DATA FLOW

REQ

REQUEST

PROCESS

RES

RESPONSE

) } [V0_FILE]typescriptreact:file="app/components/AISection.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Brain, Zap, Settings } from "lucide-react" export default function AISection() { const [activePanel, setActivePanel] = useState(0) const [processingData, setProcessingData] = useState(false) const [metrics, setMetrics] = useState({ throughput: 1247, accuracy: 99.8, latency: 47, efficiency: 94.2, }) const panels = [ { title: "WORKFLOW AUTOMATION", description: "Intelligent process optimization and task scheduling with machine learning algorithms", metrics: ["99.9% Uptime", "< 50ms Response", "Auto-scaling", "ML-powered"], processes: ["Data Ingestion", "Pattern Recognition", "Decision Making", "Action Execution"], icon: Settings, }, { title: "PREDICTIVE ANALYTICS", description: "Advanced pattern recognition and usage forecasting using deep learning models", metrics: ["Real-time Analysis", "95% Accuracy", "Data-driven", "Trend Prediction"], processes: ["Data Collection", "Feature Extraction", "Model Training", "Prediction Output"], icon: Brain, }, { title: "SMART PROVISIONING", description: "Automated eSIM deployment and configuration management with zero-touch operations", metrics: ["Zero-touch Deploy", "Bulk Operations", "Error Recovery", "Auto-healing"], processes: ["Profile Creation", "Validation", "Deployment", "Monitoring"], icon: Zap, }, ] useEffect(() => { const metricsInterval = setInterval(() => { setMetrics((prev) => ({ throughput: prev.throughput + Math.floor(Math.random() * 20 - 10), accuracy: Math.max(95, Math.min(100, prev.accuracy + (Math.random() - 0.5) * 0.2)), latency: Math.max(30, Math.min(80, prev.latency + Math.floor(Math.random() * 10 - 5))), efficiency: Math.max(90, Math.min(100, prev.efficiency + (Math.random() - 0.5) * 0.5)), })) }, 2000) const processingInterval = setInterval(() => { setProcessingData(true) setTimeout(() => setProcessingData(false), 1500) }, 5000) return () => { clearInterval(metricsInterval) clearInterval(processingInterval) } }, []) return (

ONEX™ AI ENGINE

Advanced artificial intelligence powering next-generation eSIM management and automation

{panels.map((panel, index) => { const IconComponent = panel.icon return (

setActivePanel(index)} > {activePanel === index && processingData && (

PROCESSING...

)}

{panel.title}

{panel.description}

{activePanel === index && (

{panel.metrics.map((metric, i) => ( {metric} ))}

PROCESS FLOW:

{panel.processes.map((process, i) => (

{process} {i < panel.processes.length - 1 &&

}

))}

)}

) })}

NEURAL NETWORK ACTIVITY

INPUT HIDDEN HIDDEN OUTPUT

THROUGHPUT

{metrics.throughput.toLocaleString()}

req/sec

ACCURACY

{metrics.accuracy.toFixed(1)}%

prediction

LATENCY

{metrics.latency}ms

avg response

EFFICIENCY

{metrics.efficiency.toFixed(1)}%

resource util

) } [V0_FILE]typescriptreact:file="app/components/VercelSection.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Cloud, Zap, Eye } from "lucide-react" export default function VercelSection() { const [deploymentStatus, setDeploymentStatus] = useState("READY") const [edgeMetrics, setEdgeMetrics] = useState({ regions: 23, requests: 1247892, latency: 47, uptime: 99.99, }) const vercelFeatures = [ { title: "FLUID COMPUTE", description: "Adaptive scaling with intelligent resource allocation and automatic optimization", status: "OPTIMIZED", metrics: { scaling: "Auto", efficiency: "94%", cost: "Optimized", regions: "Global" }, icon: Cloud, }, { title: "TURBO PREVIEWS", description: "Instant deployment previews with zero-config setup and real-time collaboration", status: "ACTIVE", metrics: { speed: "< 10s", accuracy: "100%", branches: "All", builds: "Parallel" }, icon: Zap, }, { title: "EDGE FUNCTIONS", description: "Global edge computing for minimal latency with intelligent request routing", status: "DEPLOYED", metrics: { regions: "23", latency: "< 50ms", coverage: "Global", runtime: "V8" }, icon: Zap, }, { title: "OBSERVABILITY", description: "Real-time monitoring and performance analytics with predictive insights", status: "MONITORING", metrics: { uptime: "99.99%", alerts: "Real-time", insights: "AI-powered", logs: "Structured" }, icon: Eye, }, ] useEffect(() => { const deploymentInterval = setInterval(() => { const statuses = ["READY", "BUILDING", "DEPLOYING", "LIVE"] setDeploymentStatus((prev) => { const currentIndex = statuses.indexOf(prev) return statuses[(currentIndex + 1) % statuses.length] }) }, 4000) const metricsInterval = setInterval(() => { setEdgeMetrics((prev) => ({ regions: 23, requests: prev.requests + Math.floor(Math.random() * 100), latency: Math.max(30, Math.min(80, prev.latency + Math.floor(Math.random() * 10 - 5))), uptime: Math.max(99.9, Math.min(100, prev.uptime + (Math.random() - 0.5) * 0.01)), })) }, 2000) return () => { clearInterval(deploymentInterval) clearInterval(metricsInterval) } }, []) return (

VERCEL INFRASTRUCTURE

DEPLOYMENT STATUS

{deploymentStatus}

REGIONS

{edgeMetrics.regions}

REQUESTS

{edgeMetrics.requests.toLocaleString()}

LATENCY

{edgeMetrics.latency}ms

UPTIME

{edgeMetrics.uptime.toFixed(2)}%

{vercelFeatures.map((feature, index) => { const IconComponent = feature.icon return (

{feature.title}

{feature.description}

{Object.entries(feature.metrics).map(([key, value]) => (

{key}: {value}

))}

{feature.status}

) })}

DEPLOYMENT ARCHITECTURE

CLI {deploymentStatus === "BUILDING" && (

)}

VERCEL CLI

{deploymentStatus === "DEPLOYING" && (

)}

EDGE

GLOBAL NETWORK

CDN

CONTENT DELIVERY

EDGE FUNCTIONS

APP {deploymentStatus === "LIVE" && (

)}

NEXORASIM

{"< 100ms"}

COLD START

99.99%

AVAILABILITY

EDGE REGIONS

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Mail, Phone, MapPin } from "lucide-react" export default function Footer() { const [systemStatus, setSystemStatus] = useState({ api: "OPERATIONAL", database: "HEALTHY", network: "OPTIMAL", security: "SECURE", }) useEffect(() => { const statusInterval = setInterval(() => { const statuses = ["OPERATIONAL", "HEALTHY", "OPTIMAL"] setSystemStatus((prev) => ({ api: statuses[Math.floor(Math.random() * statuses.length)], database: statuses[Math.floor(Math.random() * statuses.length)], network: statuses[Math.floor(Math.random() * statuses.length)], security: "SECURE", })) }, 15000) return () => clearInterval(statusInterval) }, []) return ( ) } [V0_FILE]typescriptreact:file="app/components/LoadingSpinner.tsx" export default function LoadingSpinner() { return (

LOADING NEXORASIM...

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter, JetBrains_Mono } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap", }) const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono", display: "swap", }) export const metadata: Metadata = { title: "NexoraSIM™ - AI-Driven eSIM & IoT Platform | Myanmar", description: "GSMA-compliant eSIM and IoT connectivity platform for Myanmar. Advanced AI-powered solutions with global reach, powered by Vercel infrastructure.", keywords: "eSIM, IoT, Myanmar, GSMA, AI, connectivity, telecommunications, Vercel, edge computing, SGP.22", authors: [{ name: "NexoraSIM" }], robots: "index, follow", openGraph: { title: "NexoraSIM™ - AI-Driven eSIM & IoT Platform", description: "GSMA-compliant eSIM and IoT connectivity platform for Myanmar", type: "website", locale: "en_US", siteName: "NexoraSIM", }, twitter: { card: "summary_large_image", title: "NexoraSIM™ - AI-Driven eSIM & IoT Platform", description: "GSMA-compliant eSIM and IoT connectivity platform for Myanmar", }, viewport: "width=device-width, initial-scale=1", themeColor: "#000000", manifest: "/manifest.json", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --font-inter: "Inter", sans-serif; --font-mono: "JetBrains Mono", monospace; } * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } html, body { max-width: 100vw; overflow-x: hidden; } body { color: #000; background: #fff; font-family: var(--font-inter); } .font-mono { font-family: var(--font-mono); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } /* Smooth animations */ * { transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease, border-color 0.2s ease; } /* Focus states */ button:focus, a:focus { outline: 2px solid #000; outline-offset: 2px; } /* Custom animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.5s ease-out; } @keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .animate-slideInFromLeft { animation: slideInFromLeft 0.6s ease-out; } @keyframes slideInFromRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .animate-slideInFromRight { animation: slideInFromRight 0.6s ease-out; } /* Hover effects */ .hover-lift:hover { transform: translateY(-2px); } .hover-scale:hover { transform: scale(1.02); } /* Loading states */ .loading-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Grid patterns */ .grid-pattern { background-image: linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px); background-size: 40px 40px; } /* Circuit patterns */ .circuit-pattern { background-image: radial-gradient(circle at 25% 25%, #000 2px, transparent 2px), radial-gradient(circle at 75% 75%, #000 2px, transparent 2px), linear-gradient( to right, transparent 24%, #000 25%, #000 26%, transparent 27%, transparent 74%, #000 75%, #000 76%, transparent 77% ), linear-gradient( to bottom, transparent 24%, #000 25%, #000 26%, transparent 27%, transparent 74%, #000 75%, #000 76%, transparent 77% ); background-size: 50px 50px; } /* Performance optimizations */ .will-change-transform { will-change: transform; } .will-change-opacity { will-change: opacity; } /* Accessibility improvements */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .border-gray-200 { border-color: #000; } .text-gray-600 { color: #000; } .bg-gray-50 { background-color: #fff; } } /* Print styles */ @media print { .no-print { display: none !important; } body { background: white !important; color: black !important; } } /* Hide scrollbar for Chrome, Safari and Opera */ .scrollbar-hide::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Fade edges for scrollable content */ .fade-edges { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } /* Navigation scroll buttons hover effect */ nav button:hover { background-color: rgba(0, 0, 0, 0.05); } /* Mobile menu animation */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .mobile-menu-open { animation: slideDown 0.3s ease-out forwards; } /* Glassmorphism effects */ .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } /* Schematic line animations */ @keyframes dataFlow { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } .data-flow { stroke-dasharray: 10, 5; animation: dataFlow 2s linear infinite; } [V0_FILE]javascript:file="tailwind.config.js" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, gray: { 50: "#fafafa", 100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a3a3a3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-inter)", "system-ui", "sans-serif"], mono: ["var(--font-mono)", "monospace"], }, animation: { "spin-slow": "spin 30s linear infinite", "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite", "bounce-slow": "bounce 2s infinite", "ping-slow": "ping 3s cubic-bezier(0, 0, 0.2, 1) infinite", }, backdropBlur: { xs: "2px", }, }, }, plugins: [require("tailwindcss-animate")], }

NEXORASIM ™

CORE FEATURES

{feature.title}

REAL-TIME DATA FLOW

ONEX™ AI ENGINE

{panel.title}

NEURAL NETWORK ACTIVITY

VERCEL INFRASTRUCTURE

DEPLOYMENT STATUS

{feature.title}

DEPLOYMENT ARCHITECTURE

NEXORASIM ^™

About

Tags

Share

About

Tags

Share

More from nexorasim

More Templates Like This